<template>
  <div class="add-form">
    <div class="nb-tittle">{{ title }}</div>
    <el-form ref="form" :model="data" inline label-width="120px" hide-required-asterisk class="hx-form" :rules="rules">
      <div class="contract-form">
        <el-row :span="9">
          <el-form-item label="项目名称：">
            <v-select v-model="data.project_id" action="projectList" class="w160" />
          </el-form-item>
          <el-form-item label="供应商：" prop="provider_id">
            <v-select v-model="data.provider_id" class="w160" action="providerList" />
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="合同编号：">
            <el-input v-model="data.code" class="w160" />
          </el-form-item>
          <el-form-item label="合同名称：">
            <el-input v-model="data.contract_name" class="w160" />
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="实际金额：" prop="actual_sum">
            <el-input v-model="data.actual_sum" class="w160" />
          </el-form-item>
          <el-form-item label="付款方式：" prop="pay_method_id">
            <el-select v-model="data.pay_method_id" placeholder="请选择" class="w160">
              <el-option v-for="item in payMethodIdOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="签订日期：">
            <el-date-picker v-model="data.signed_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="detail-select" />
          </el-form-item>
          <el-form-item label="授权代表人：" prop="representative">
            <el-input v-model="data.representative" style="width: 160px" />
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="单位名称：" prop="company_name">
            <el-input v-model="data.company_name" style="width: 160px" />
          </el-form-item>
          <el-form-item label="纳税人识别号：">
            <el-input v-model="data.trn" style="width: 160px" />
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="开票电话：" prop="invoice_mobile">
            <el-input v-model="data.invoice_mobile" style="width: 160px" />
          </el-form-item>
          <el-form-item label="开票地址：">
            <el-input v-model="data.invoice_address" style="width: 160px" />
          </el-form-item>
        </el-row>
        <el-row :span="9">
          <el-form-item label="开户行：">
            <el-input v-model="data.invoice_bank" style="width: 160px" />
          </el-form-item>
          <el-form-item label="开户账号：">
            <el-input v-model="data.invoice_account" style="width: 160px" />
          </el-form-item>
        </el-row>
      </div>
      <el-row :span="9">
        <el-form-item label="付款次数：">
          <el-input-number v-model="data.times" class="w160" controls-position="right" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-row>
          <el-form-item v-if="editId" label="上传附件：">
            <Adjunct table_name="contract" :pk="editId" class="detail-input" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备注:">
            <el-input
              v-model="data.content"
              type="textarea"
              style="width: 452px"
              :rows="2"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-row>
      </el-row>
      <el-form-item style="margin:40px 20px 0">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import API from '@/api/contract/contract'
import VSelect from '@/components/select'
import Adjunct from '@/components/Upload/Adjunct'
import { payMethodIdOption } from '@/utils/options'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'isNumeric', 'setStorage', 'clearStorage', 'getStorage'],
  components: { VSelect, Adjunct },
  data() {
    const sum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写实际金额'))
      }
      setTimeout(() => {
        const isNumber = this.isNumeric(value)
        if (!isNumber) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 400)
    }
    const times = (rule, value, callback) => {
      let message = ''
      message = '付款次数'
      setTimeout(() => {
        if (!value) {
          callback(new Error(message))
        } else {
          callback()
        }
      }, 400)
    }
    return {
      data: {
        actual_sum: '',
        pay_method_id: '',
        type: 2
      },
      activeName: 'first',
      title: '',
      editId: '',
      rules: {
        pay_method_id: { required: true, message: '请选择付款方式', trigger: 'change' },
        code: { required: true, message: '请输入编号', trigger: 'change' },
        actual_sum: { validator: sum, trigger: 'blur' },
        signed_date: { required: true, message: '请输入签订日期', trigger: 'change' },
        legal_person: { required: true, message: '请输入法人代表', trigger: 'change' },
        provider_id: { required: true, message: '请选择供应商', trigger: 'change' },
        mobile: { required: true, message: '请输入电话', trigger: 'change' },
        representative: { required: true, message: '请输入授权代表人', trigger: 'change' },
        contract_name: { required: true, message: '请输入合同名称', trigger: 'change' },
        times: { validator: times, trigger: 'change' },
        company_name: { required: true, message: '单位名称必须填写', trigger: 'change' },
        invoice_mobile: { required: true, message: '开票电话必须填写', trigger: 'change' }
      },
      payMethodIdOption
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.editId = edit
      this.info()
    } else {
      this.title = '新增采购合同'
      if (this.getStorage('purchase')) {
        this.data = this.getStorage('purchase')
      }
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        this.title = '采购合同详情'
        this.rules.times = { required: true, message: '请输入付款次数', trigger: 'change' }
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('purchase')
    },
    cancel() {
      if (!this.editId) {
        this.setStorage('purchase', this.data)
      }
      this.goUrl('/purchase')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.update(API, this.data, '更新成功')
          } else {
            this.add(API, this.data, '新增成功')
            this.clearStorage('purchase')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.w160{
  width: 160px;
}
.contract-form {
  width: calc(100% - 120px);
}
</style>
